<template>
  <el-tooltip effect="customized" :content="title" placement="bottom-start">
    <el-button v-bind="$attrs" :class="['hc-button', `hc-button-${type}`]">
      <slot> </slot>
    </el-button>
  </el-tooltip>
</template>

<script lang="ts" setup>
const { icon, activeIcon, title, type } = defineProps<{
  icon?: string;
  activeIcon?: string;
  title?: string;
  type?: "silver" | "gray" | "transparent" | "black";
}>();

const cssIcon = computed(() => {
  return `url(${icon})`;
});

const cssActiveIcon = computed(() => {
  return `url(${activeIcon})`;
});
</script>

<style lang="scss">
.el-popper.is-customized {
  padding: 6px 12px;
  background-color: black;
  color: white;
}
.el-popper.is-customized .el-popper__arrow::before {
  background-color: black;
  right: 0;
}

.hc-button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  &::after {
    content: "";
    z-index: 10;
    background-image: v-bind(cssIcon);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    &:hover {
      background-image: v-bind(cssActiveIcon);
    }
  }
}

.hc-button-silver {
  width: 2.857143rem /* 40/14 */;
  height: 2.571429rem /* 36/14 */;
  background: linear-gradient(#f0f0f0, #c1c1c1);
  &:hover {
    background: linear-gradient(#54c4b1, #309d96);
    &:after {
      background-image: v-bind(cssActiveIcon);
    }
  }
  &:active {
    background: linear-gradient(#48b2ab, #2e9193);
    &:after {
      background-image: v-bind(cssActiveIcon);
    }
  }
}

.hc-button-gray {
  width: 2rem /* 28/14 */;
  height: 2rem /* 28/14 */;
  border-radius: 50%;
  background-color: #99a5a6;
  &:hover {
    background-color: #bdd9dd;
  }
  &:active {
    background-color: #bdd9dd;
  }
}

.hc-button-black {
  width: 2rem /* 28/14 */;
  height: 2rem /* 28/14 */;
  border-radius: 50%;
  background-color: black;
  padding: 0.714286rem /* 10/14 */;
}
</style>
